<template>
	<view class="padding">
		<use-navbar title="会员中心" bgColor="#ff6a6c"></use-navbar>
		<use-fixbg></use-fixbg>

		<view class="dflex money-area ">
			<view v-for="item in setting" :key="item._id" :class="{ active: selectVip._id == item._id }"
				@click="vipChange(item)" class="item flex1 wpre-30 dflex-c dflex-flow-c bg-white" style="padding: 5px;">
				<view>{{item.name}}</view>
				<text class="fs-xs">{{item.way}}</text>
				<text class="fs-xs" v-if="item.way==='积分兑换'">{{item.integral}}积分</text>
				<text class="fs-xs" v-if="item.way==='购买'">{{item.money}}元</text>
				<text class="fs-xs" v-if="item.way==='储值'">{{item.recharge_money}}元</text>
				<text class="fs-xs" v-if="item.way==='储值'">到账{{item.arrival_money}}元</text>
			</view>
		</view>
		<view class="border-radius-big fwb tac padding-tb-16 ft-base pos-r pos-l-c fs"
			style="width: 360rpx; top: 40rpx; z-index: 1; border: 1px solid #ff6a6c; background: #fef0ef;">
			权益说明
		</view>
		<view class="bg-main border-radius padding padding-top-lg padding-bottom-big margin-top-sm">
			<rich-text class="detail" :nodes="html_nodes"></rich-text>
		</view>
		<view class="margin-top-big border-radius-lg pos-a" style="bottom: 60rpx; left: 30rpx; right: 30rpx;">
			<view class="tac fwb flex1 bg-base dflex overflow-hidden" @click="openMember">
				<view class="flex1 padding-tb-sm tal padding-left-xl margin-left">
					<text v-if="selectVip.way==='购买'" class="fs-34 line-height-1">支付￥{{selectVip.money}}元</text>
					<text v-if="selectVip.way==='积分兑换'" class="fs-34 line-height-1">消耗{{selectVip.integral}}积分</text>
					<text v-if="selectVip.way==='储值'"
						class="fs-34 line-height-1">储值￥{{selectVip.recharge_money}}元</text>
				</view>
				<view v-if="!islogin" class="bg-warn ft-white padding-tb-sm" style="width: 40%;">立即登录</view>
				<view v-else class="bg-warn ft-white padding-tb-sm" style="width: 40%;">立即开通</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef MP-ALIPAY
	import aliParse from 'mini-html-parser2';
	// #endif
	export default {
		computed: {
			...mapState(['islogin', 'member']),
			appabbr() {
				return this.$config.appabbr;
			}
		},
		data() {
			return {
				setting: {},
				selectVip: {},
				html_nodes: []
			};
		},
		onLoad(options) {},
		onShow() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.$func.wmzmall.call('vip/data').then(res => {
					if (res.code == 200) {
						this.setting = res.datas.parameter;
						this.selectVip = this.setting[0]
						let content = this.selectVip.vip_desc
						// #ifndef MP-ALIPAY
						this.html_nodes = content
						// #endif
						// #ifdef MP-ALIPAY
						this.html_nodes = [];
						aliParse(content, (err, nodes) => {
							if (!err) {
								this.html_nodes = nodes;
							}
						});
						// #endif
						return;
					}

					this.$api.msg(res.msg);
				});
			},
			vipChange(item) {
				this.selectVip = item
				let content = this.selectVip.vip_desc
				// #ifndef MP-ALIPAY
				this.html_nodes = content
				// #endif
				// #ifdef MP-ALIPAY
				this.html_nodes = [];
				aliParse(content, (err, nodes) => {
					if (!err) {
						this.html_nodes = nodes;
					}
				});
				// #endif
			},
			// 检查当前会员状态
			validateMember(callback) {
				// 判断当前会员状态
				if (this.member && this.member.is_plus === '付费会员') {
					uni.showModal({
						title: '当前已是VIP会员，是否继续开通',
						confirmText: '确定',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								typeof callback === 'function' && callback();
							}
						}
					})
					return;
				}

				typeof callback === 'function' && callback();
			},
			// 立即开通
			openMember() {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}

				this.validateMember(() => {
					if (this.selectVip) {
						if (this.selectVip.way === '储值' || this.selectVip.way === '购买') {
							this.$api.msg('去支付 ...');
							let money = this.selectVip.money
							if (this.selectVip.way === '储值') {
								money = this.selectVip.recharge_money
							}
							uni.navigateTo({
								url: '/sub-user/pages/member/pay?money=' + money + '&vip_id=' + this.selectVip
									._id
							})
							return;
						} else {
							this.$func.wmzmall.call('vip/integral').then(res => {
								if (res.code == 200) {
									this.$api.msg('开通会员成功,请返回刷新');
								} else {
									this.$api.msg(res.msg);
								}
							});
							return
						}
					}

					this.$api.msg('请选择开通类别');
				});

			},
			toContent() {
				if (!(this.setting && this.setting.desc)) return;

				const content =
					`<div class="__rich_text">${this.setting.desc.replace(/<h1/gi, '<h1 class="use-p"').replace(/<h3/gi, '<h3 class="use-p"').replace(/<p/gi, '<p class="use-p"')}</div>`;

				uni.setStorage({
					key: '__rich_text',
					data: content,
					success() {
						uni.navigateTo({
							url: '/pages/content/rich-text'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;

		.vip-area {
			background-image: url('/static/images/member/0.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 280rpx;
		}

		.img-item {
			width: 66rpx;
			height: 66rpx;
		}

		.ft-dark {
			font-size: 22rpx;
		}
	}

	.money-area {
		margin-top: 30rpx;
		margin-bottom: 20rpx;

		.item {
			height: 200rpx;
			background: #f5f5f5;
			border-radius: 14rpx;

			.price {
				color: #333;
				margin-bottom: 10rpx;
			}

			text {
				color: #9a9a9a;
			}

			&:nth-child(2) {
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}

		.active {
			background: #ffbc49;
			color: #fff;

			.price,
			text {
				color: #fff !important;
			}
		}
	}
</style>